<template id="app">
	<!-- <el-container style="height: 600px;"> -->
	<el-container>
	  	<el-header id="header" ><Header  /></el-header>
	  	<el-container>
	  		<Menu />
	    	<el-main id="main">
	    		<div id="main1">
	    		<keep-alive >
	    			<router-view v-if="$route.meta.keepAlive" ></router-view>
	    		</keep-alive>

	    		<router-view v-if="!$route.meta.keepAlive" ></router-view>
	    		</div>
	    	</el-main>
	  	</el-container>
	</el-container>

	<!-- <el-container>
		<el-aside width="200px"><Menu /></el-aside>
		<el-container>
			<el-header>Header</el-header>
			<el-main><router-view/></el-main>
		</el-container>
	</el-container> -->

</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import Menu from '../components/menu'
import Header from '../components/header'

export default {
	name: 'index',
		data () {
		return {
		  	
		}
	},

	components: {
		Menu,
		Header,
	},

	computed : {
		
	},

	methods : {
		...mapActions([

		]),
	},

	watch:{
	    
	},

	mounted () {
		this.$store.dispatch('getUserInfo');
		this.$store.dispatch('getMenuList', {
			menu_id : '143bf2ef757b4f3f94f5d3de0cef7b06'
		});
	},

}
</script>

<style scoped>


#header {
	z-index: 999;
	box-sizing: border-box;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease-in-out;
    background-color: #fff;

    position: fixed;
    width: 100%;
    top: 0;
}

#menu {
	position: fixed;
    z-index: 400;
    transition: left 0.15s;
    top: 60px;
    bottom: 0;
    left: 0;
    /*background-color: #f5f5f5;*/
    box-shadow: inset -1px 0 0 #e5e5e5;
    transform: translate3d(0, 0, 0);
}

#main {
	padding: 75px 15px 15px 15px;
    
    /*max-width: 1280px;*/
    position: relative;
}
#main1 {
	min-width: 1024px;
	max-width: 1380px;
}
</style>
